<template>
    <div class="order-wrap">
        <!-- <headerNav title="结算单"/> -->
        <div class="choose-warp">
            <div class="choose-btn" @click="show = true">{{settleMonth}}</div>
            <span>实际合计： {{actSettleAmt}}</span>
        </div>
        <div class="list-wrap">
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true" infinite-scroll-distance="30">
                <div class="ul">
                    <div class="li" v-for="(item, index) in list" :key="index">
                        <div class="time">{{item.settleDate}}</div>
                        <div class="box">
                            <div class="item" @click="handleDetail('bonus', item.settleDate)">
                                <span>分红金额 <b>{{item.bonusAmt}}</b></span>
                                <span>应得结算金额 <b>{{item.unsettleAmt}}</b></span>
                            </div>
                            <div class="item" @click="handleDetail('profit', item.settleDate)">
                                <span>分润金额 <b>{{item.profitAmt}}</b></span>
                                <span>实际结算金额 <b>{{item.actSettleAmt}}</b></span>
                            </div>
                        </div>
                    </div>
                    <div class="no-data">暂无数据</div>
                </div>
                <div class="tips" v-show="busy && list.length > 9">{{tips}}</div>
            </div>
        </div>
        <van-datetime-picker
        v-if="show"
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="handleCancel"
        @confirm="handleConfirm"
        :formatter="formatter"
        />
        <navigate />

    </div>
</template>

<script>
import Vue from "vue"
import { DatetimePicker  } from 'vant';
import {settleDetail} from "../../api/page.js"

Vue.use(DatetimePicker);
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            list: [],
            busy: false,
            tips: "页面正在加载中...",
            temp: false,
            settleMonth: "2020-08",
            show: false,
            actSettleAmt: 0,
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
        };
    },
    created() {
        this.pageNum = 1
        this.getListData()
    },
    methods: {
        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            }
            return val;
        },
        handleDetail(type, date) {
            this.$router.push(`/tabledetail?type=${type}&date=${date}`)
        },  
        handleConfirm(e) {
            const date = new Date(e)
            const year = date.getFullYear()
            let month = date.getMonth() + 1
            if (month < 10) {
                month = "0" + month
            }
            this.settleMonth = year + "-" + month
            this.show = false
            this.getListData()
            console.log(year, month, this.settleMonth)
        },
        handleCancel() {
            this.show = false
        },
        loadMore() {
            console.log(this.pageNum, this.list.length)
            if (!this.busy && !this.temp) {
                this.getListData()
            }
        },
        getListData() {
            this.busy = true
            this.temp = true
            settleDetail({pageNum: this.pageNum, pageSize: this.pageSize, settleMonth: this.settleMonth}).then(res => {
                this.temp = false
                this.busy = false;
                this.list = res.data.settleDetailResultDtoList
                this.actSettleAmt = res.data.actSettleAmt
                this.pageNum = this.pageNum + 1
                if (res.data.settleDetailResultDtoList.length < 10) {
                    this.busy = true;
                    this.tips = "页面数据全部加载完毕"
                }
            })
        }
    }
};
</script>

<style scoped lang="less">
/deep/ .van-picker {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 2;
}
.order-wrap {
    background: #F7F7F7;
    height: 100%;
    padding-top: 0.293333rem;
    box-sizing: border-box;
    .choose-warp {
        display: flex;
        justify-content: space-between;
        align-content: center;
        padding: 0 0.413333rem 0.293333rem 0.413333rem;
        span {
            font-size: 0.4rem;
            color: #000;
        }
        .choose-btn {
            width: 3.04rem;
            background: #DFDFDF;
            font-size: 0.4rem;
            font-weight: bold;
            border-radius: 0.333333rem;
            font-size: 0.32rem;
            color: #343434;
            height: 0.666667rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.list-wrap {
    padding-bottom: 0.8rem;
}
.ul {
    .li {
        font-size: 0.4rem;
        height: 3.066667rem;
        box-sizing: border-box;
        padding-top: 0.293333rem;
        background: #fff;
        .time {
            width: 2.28rem;
            background: #F1F1F1;
            border-radius: 0.253333rem;
            font-size: 0.32rem;
            color: #343434;
            height: 0.506667rem;
            margin-left: 0.386667rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            font-size: 0.48rem;
            .item {
                padding: 0 0.386667rem;
                height: 1.146667rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                &:nth-child(1) {
                    border-bottom: 0.026667rem solid transparent;
                    border-image: linear-gradient(to bottom,transparent 50%, #e5e5e5 50%) 0 0 100%/0.026667rem 0;
                }
                span {
                    font-size: 0.4rem;
                    display: flex;
                    justify-content: center;
                    align-items: baseline;
                    b {
                        margin-left: 0.266667rem;
                    }
                }
            }
        }

    }
    .no-data {
        font-size: 0.4rem;
        text-align: center;
        margin-top: 1.333333rem;
    }
}
.tips {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #333;
}
</style>
